@import "../../styles/variables";
@import "../../styles/mixins";

.collapse {
  line-height: 1.67;
  font-size: $size-small;
  border-radius: $border-radius;

  ul {
    padding: 0;
    margin: 0;
  }

  li:first-child > :first-child {
    border-radius: $border-radius $border-radius 0 0;
  }

  &-item {
    &-label {
      position: relative;
      padding: 8px 20px;
      color: $collapse-item-text;
      background-color: $collapse-item-bg;
      font-weight: $font-bold;
      line-height: 20px;
      cursor: pointer;

      .icon {
        right: 20px;
        @include vertical-center;
      }
      &-border-bottom {
        color: $collapse-item-active-text;
        background-color: $collapse-item-active-bg;
      }
      &-last-border-bottom {
        border-radius: 0 0 $border-radius $border-radius;
      }
    }
    &-content {
      padding: 12px;
      @include TypographyParagraph;
      background-color: $collapse-content-bg;
      overflow: hidden auto;
      color: $collapse-content-text;
      &-last-border-bottom {
        border-radius: 0 0 $border-radius $border-radius;
      }
    }
  }
  &-transition {
    overflow: hidden;
    transition: height 0.3s ease;
  }
}
